/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-11-05 21:03:52
 */
/**
 * @description 此页面暂时不用： TODO:
 */
 import React, { useEffect, useState } from "react";
import Taro from '@tarojs/taro'

import { View, Swiper, SwiperItem } from "@tarojs/components";

import { getOrderList } from '@/api/order'

 import styles from './index.module.scss'

 const AddressItem = (props) => {
   const { 
     index,
     dataItem,
     curMoveIndex,
     detail = '',
     gender = '1', 
     userName= '', 
     cellPhone = '', 
     address = '', 
     clickHandle, 
     editClick,  
     iconBar,
     addressSId,
     touchMoveFn,
     delClick
  } = props
  /** 侧滑删除 */
  const [startX, setStartX] = useState<number>(0)
  const [startY, setStartY] = useState<number>(0)
  const [curMove, setCurmove] = useState(null)

  const handleTouchStart = (e) => {
    setStartX(e.touches[0].pageX)
    setStartY(e.touches[0].pageY)
  }
  const handleTouchMove = (_data, e) => {
    const { addressSId } = _data
    
    const currentX = e.touches[0].pageX

    const moveX  = startX - currentX
    const moveY = e.touches[0].pageY - startY

    if (Math.abs(moveY) > Math.abs(moveX)) return

    if (moveX === 0 || moveX < 0) { // 如果移动距离小于等于0，说明向右滑动，文本层位置不变
      curMove === addressSId && (setCurmove(null))
    } else if (moveX > 0 && moveX >= 50) { // 50是button宽度
      // 当前滑动的 item-index
      setCurmove(addressSId)
      touchMoveFn(index)
    }
  }
  const handleTouchEnd = (e) => {
  }

  const onClickDelete  =() => {

  }

   useEffect(() => {
     
   }, []);
   return (
     <View className={styles.addressItem}>
       <View 
         className={`${styles.item_box}`}
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove.bind(this, dataItem)}
         onTouchEnd={handleTouchEnd} 
       >
        <View className={`${styles.overflow_container} ${curMove == dataItem.addressSId && curMoveIndex == index ? styles.active : styles.noActive} `} >
          <View className={styles.header}>
            <View className={styles.addressInfo} onClick={() => clickHandle()}>
              <View className={styles.address}>{address}</View>
              <View className={styles.namePhone}>
                <View>{userName}</View>
                <View className={styles.gender}>{gender === 0 ? '先生' : '女士'}</View>
                <View>{cellPhone}</View>
              </View>
            </View>
            <View className={styles.rightArrow} onClick={editClick}>
              {
                iconBar ? iconBar : null
              }
            </View>
          </View>
          <View className={styles.operate_btn}>
            <View className={`${styles.btn} ${styles.edit}`} onClick={editClick}>编辑</View>
            <View className={`${styles.btn} ${styles.del}`} onClick={delClick}>删除</View>
          </View>
        </View>
      </View>
     </View>
   );
 }

 export default AddressItem
